<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/8/5
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath()+"/";%>

<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>Title</title>
    <link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css">

    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="js/ztree/js/jquery.ztree.core.js"></script>
    <style>
        .border{
            border-radius: 8px;
            background-color: #ffffff;
        }
        *{
            margin:0px;
            padding:0px;
        }
        body {
            font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="container" style="background-color: #f3f3f4;width: 100%;">
    <div class="row a" style="margin-right: 0px;margin-left: 0px;">
        <div class="col-md-2" style="background-color: #ffffff;height: 700px;padding:0px;">
            <div class="panel panel-default">
                <div class="panel-heading">

                    <div style="display: inline-block;">组织机构</div>
                    <div  style="display: inline-block;padding-left: 30px;">
                        <span class="glyphicon glyphicon-edit"></span>
                        <span class="glyphicon glyphicon-menu-down" onclick="toggle()"></span>
                        <span class="glyphicon glyphicon-refresh" onclick="treeInit()"></span>
                    </div>
                </div>
                <div class="panel-body ztree" id="treeDemo">
                </div>

            </div>
        </div>
        <div class="col-md-10" style="padding:0px;height:678px;">
            <div class="row border" style="margin:10px 10px;padding:10px 0px;">
                <div class="col-md-12">
                    <form class="form-inline" id="form1">
                        <input type="hidden" name="deptId" id="deptId">
                        <div class="form-group" style="margin-bottom: 10px;">
                            <label for="exampleInputName2">登录名：</label>
                            <input type="text" class="form-control" name="userName" id="exampleInputName2" placeholder="登录名">
                        </div>
                        <div class="form-group" style="margin-bottom: 10px;">
                            <label for="exampleInputEmail2">手机号</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="手机号">
                        </div>
                        <div class="form-group" style="margin-bottom: 10px;">
                            <label for="exampleInputEmail2">状态</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="状态">
                        </div>
                        <div class="form-group" style="margin-bottom: 10px;">
                            <label for="exampleInputEmail2">创建时间</label>
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="创建时间">
                        </div>
                        <div class="form-group" style="margin-bottom: 10px;">
                            <button type="button" onclick="$.table.refresh();" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search"></span>搜索</button>
                            <button type="reset" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row border"  style="margin:10px 10px;padding:10px 0px;">
                <div class="col-md-12" >
                    <table id="table"></table>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div id="toolbar">
            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success btn-sm" onclick="$.operator.addOrEdit('user/toEdit','新增用户信息')"><span class="glyphicon glyphicon-plus"></span> 新增</button>

            <button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-edit"></span> 修改</button>

            <button type="button" onclick="$.operator.deletes('user/deletes');" class="btn btn-warning btn-sm" title="支持批量删除"><span class="glyphicon glyphicon-trash"></span> 删除</button>

            <button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-print"></span> 打印</button>

        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/bootstrap/rbac.js"></script>
<style>
    .header{
    }
    .idColor{
        color:yellow;
    }
</style>
<script>
// jquery  
// var $table = $("#table");
    var zTreeObj; // 声明了树对象
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
function nodeClick(event,treeId,treeNode,clickFlag){
    // treeId为当前树的id
    // treeNode当前点击的节点信息 （部门信息）
    var deptId = treeNode.id;
    $("#deptId").val(deptId);
    $.table.refresh();
}
    var setting = {
        data:{
            simpleData:{
                enable: true,// 使用简单数据
                idKey:"id",
                pIdKey:"parentId",
                rootPId:0
            },
            key:{
                name:'deptName'
            }
        },
        callback:{
            onClick: nodeClick
        }
    };

    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    // 树的节点数据
    // 1. 复杂类型  children属性（json数组）
    // 2. 简单类型  pid
// test1 1 0
// test1_1 2 1
    var zNodes;
    // 异步请求 并默认异步执行
    function  treeInit(){
        $.getJSON('dept',function(ret){
            zNodes = ret.result;
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj.expandAll(true);
        })
    }
    treeInit();
    var flag=0;
    function toggle(){
        flag++;
        if(flag%2==1){
        zTreeObj.expandAll(false);
        }else{
            zTreeObj.expandAll(true);
        }
    }
    function deletes(){
        let ids = $.table.getSelections();
        console.info(JSON.stringify(ids))
    }
    var columns=[{
            title:"复选框1",
            checkbox:true
        },{
            field: 'id',
            titleTooltip:'这是主键',
            width:200,
            widthUnit:'px',
            align:'center',
            halign:'center',
            title: 'ID',
            sortable:true,
            clickToSelect:true,
            sorter:function(fieldA,fieldB,rowA,rowB){
                console.info('排序......')
                return fieldB-fieldA;
            }
            
        }, {
            field: 'userName',
            title: '用户名'
        }, {
            title: '性别',
            field: 'id',
            formatter:function(value){
                if(value%2==0){
                    return '男';
                }
                return '女';
            }
        },{
       field:'deptId',
       title:'所属部门'
    } ,{
            field: 'userName',
            title: '用户名1',
            visible:true,
            switchable:false,
            cardVisible:false
        },{
            title:'操作',
            align: 'center',
            formatter:function(value,row,index){
                console.info(JSON.stringify(row))
                return '<a href="javascript:void(0)" onclick="$.operator.addOrEdit(\'user/toEdit?id='+row.id+'\',\'编辑用户信息\')" title="编辑"><span class="glyphicon glyphicon-edit"></span></a>&nbsp;<a href="javascript:void(0)" onclick="tableDelete(\''+row.id+'\')" title="删除"><span class="glyphicon glyphicon-trash"></span></a>';
            }
        }];
    $.table.init('table',columns,'user');
        function tableDelete(id){
            $.operator.delete('user/delete/'+id);
        }
        function close(){
            layer.close(index);
        }
        function refresh(){
            $.table.refresh();
        }
</script>
</html>

